<template>
    <div class="red-probability">
        <div class="probability-item" v-for="(item, index) in list">
            <el-input v-model="item.money" placeholder="红包金额" style="width: 30%"></el-input>
            <span style="margin-left: 30px">概率：</span>
            <el-input v-model="item.probability" placeholder="概率" style="width: 30%;margin-left: 6px"></el-input>
            <el-button type="text" style="margin-left: 20px" size="medium" v-if="(index + 1) === list.length" @click="addLine()">增加</el-button>
        </div>
    </div>
</template>

<script>
	export default {
		name: 'RedProbability',
        props: {
			value: {
				type: String,
            }
        },
        data() {
			return {
				list: [{}]
            }
        },
        methods: {
			addLine() {
				this.list.push({})
            }
        },
        watch: {
			value(val) {
				this.list = JSON.parse(this.value);
            },
			list(val) {
				this.$emit('input', this.list)
			}
        }
	};
</script>

<style lang="scss" scoped>
.red-probability {
    .probability-item {
        margin-bottom: 10px;
    }
}
</style>